<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>图片轮换</title>
	<style type="text/css">
	*{margin:0;padding: 0;}
	li{list-style-type: none;}
	.wap{margin: 0 auto;margin-top:50px;width: 620px;height: 340px;position: relative;overflow:hidden;border:1px solid #ccc;cursor: pointer;}
	.wap img{display: none;position: absolute;top: 0;}
	.wap ul{width: 2480px;position: absolute;top: 0;left: 0;}
	.wap ul li{float: left;width: 620px;}
	.wap ol{position: absolute;right:10px;bottom: 20px;}
	.wap ol li{float: left;width: 16px;height: 16px;border:1px solid #fff;margin-left:3px;text-align: center;line-height: 16px;font-size: 12px;color:#fff; cursor: pointer;}

	.wap ol li.selected{background-color: #00ffff;color: #000;}
	</style>

	<script language="javascript" src="js/jquery-1.11.1.js"></script>
	<script type="text/javascript">
	$(function(){
		
		var imgObj = $(".wap").find("img");
		var index = 0;
		var _left = $(".wap img").eq(0).width();
		var _next;
		var ifover = false;
		$(".wap img").eq(0).show();

		slidePic = setInterval(function(){
			movePic();
		},1500)

		imgObj.mouseover(function(event) {
			clearInterval(slidePic);
		});

		imgObj.mouseleave(function(event) {
			// 在连续触发的时候（滑动没有完成）不做操作
			if(ifover)
			{
				slidePic = setInterval(function(){
					movePic();
				},1500)
			}
		});

		function movePic(){
			// ifover = false
			_next = index + 1;
			$(imgObj[index]).animate({left: -_left}, 500)
			if(index == 3)
			{
				_next = 0
			}
			$(imgObj[_next]).show().css({left: _left});
			$(imgObj[_next]).animate({left: 0}, 500,function(){
				ifover = true;
			})

			index = _next;
			
		}

	})
	</script>
</head>
<body>
	<div class="wap">
			<img src="images/pic1.jpg" alt="" />
			<img src="images/pic2.jpg" alt="" />
			<img src="images/pic3.jpg" alt="" />
			<img src="images/pic4.jpg" alt="" />
		<ol>
			<li class="selected">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ol>
	</div>
</body>
</html>